import React from 'react';
import { Card, Table, Modal, Button, message } from 'antd';
// import axios from 'axios';
import axios from './../../axios/index';
import Utils from './../../utils/utils';
export default class BasicTable extends React.Component {
    state = {
        dataSource2: []
    }

    params={
        page:1
    }
    componentDidMount() {
        const data = [
            {
                id: '0',
                userName: 'Jack',
                sex: '1',
                state: '1',
                interest: '1',
                birthday: '1994-06-02',
                address: '东莞市人民公园',
                time: '09:00'
            },
            {
                id: '1',
                userName: 'Amy',
                sex: '1',
                state: '1',
                interest: '1',
                birthday: '1994-06-02',
                address: '东莞市人民公园',
                time: '09:00'
            },
            {
                id: '2',
                userName: 'Tim',
                sex: '1',
                state: '1',
                interest: '1',
                birthday: '1994-06-02',
                address: '东莞市人民公园',
                time: '09:00'
            },
        ]
        data.map((item, index) => {
            item.key = index;
        })
        this.setState({
            dataSource: data
        })
        this.request();
    }

    //动态获取mock数据
    request = () => {
        let _this= this;
        axios.ajax({
            url: '/table/list',
            data: {
                params: {
                    page: this.params.page
                },
                // isShowLoading:false //关闭loading
            }
        }).then((res) => {
            if (res.code == 0) {
                res.result.list.map((item, index) => {
                    item.key = index;
                })
                this.setState({
                    dataSource2: res.result.list,
                    selectedRowKeys:[],
                    selectedRows: null,
                    pagination:Utils.pagination(res,(current)=>{
                        _this.params.page = current;
                        this.request();
                    })
                })
            }
        })
    }


    onRowClick = (record, index) => {
        let selectKey = [index];
        Modal.info({
            title: '信息',
            content: `用户名:${record.userName},用户爱好:${record.interest}`
        })
        this.setState({
            selectedRowKeys: selectKey,
            selectedItem: record,
        })
    }

    //多选执行删除操作
    handleDelete=(()=>{
        let rows = this.state.selectedRows;
        let ids = [];
        rows.map((item)=>{
            ids.push(item.id)
        })
        Modal.confirm({
            title:'删除提示',
            content:`你确定要删除这些数据吗？${ids.join(',')}`,
            onOk:()=>{
                message.success('删除成功');
                this.request();
            }
        })
    })



    render() {
        const columns = [
            {
                title: 'id',
                dataIndex: 'id'
            },
            {
                title: '用户名',
                dataIndex: 'userName'
            },
            {
                title: '性别',
                dataIndex: 'sex',
                render(sex) {
                    return sex == 1 ? '男' : '女'
                }
            },
            {
                title: '状态',
                dataIndex: 'state',
                render(state) {
                    let config = {
                        '1': '咸鱼一条',
                        '2': '清华才子',
                        '3': '紫起上道',
                        '4': '大导演',
                        '5': '皮卡丘',
                        '6': '水鱼',
                    }
                    return config[state];
                }
            },
            {
                title: '爱好',
                dataIndex: 'interest',
                render(interest) {
                    let config = {
                        '1': '篮球',
                        '2': '游泳',
                        '3': '羽毛球',
                        '4': '跳舞',
                        '5': '唱K',
                        '6': '爬山',
                        '7': '踢毽子',
                        '8': '台球',
                    }
                    return config[interest];
                }
            },
            {
                title: '生日',
                dataIndex: 'birthday'
            },
            {
                title: '地址',
                dataIndex: 'address'
            },
            {
                title: '早起时间',
                dataIndex: 'time'
            },
        ]

        const { selectedRowKeys } = this.state;
        const rowSelection = {
            type: 'radio',
            selectedRowKeys
        }

        const rowCheckSelection = {
            type: 'checkbox',
            selectedRowKeys,
            onChange: (selectedRowKeys, selectedRows) => {
                // let ids =[];
                // selectedRows.map(()=>{
                //     ids.push(item.id)
                // })
                this.setState({
                    selectedRowKeys,
                    // selextedIds: ids
                    selectedRows
                })
            }
        }
        return (
            <div>
                <Card title="基础表格">
                    <Table
                        bordered
                        columns={columns}
                        dataSource={this.state.dataSource}
                        pagination={false}
                    />
                </Card>
                <Card title="动态数据渲染表格-Mock" style={{ margin: '10px 0' }}>
                    <Table
                        bordered
                        columns={columns}
                        dataSource={this.state.dataSource2}
                        pagination={false}
                    />
                </Card>
                <Card title="Mock-单选" style={{ margin: '10px 0' }}>
                    <Table
                        bordered
                        columns={columns}
                        rowSelection={rowSelection}
                        onRow={(record, index) => {
                            return {
                                onClick: () => {
                                    this.onRowClick(record, index);
                                }

                                // 点击行
                            };
                        }}
                        dataSource={this.state.dataSource2}
                        pagination={false}
                    />
                </Card>
                <Card title="Mock-复选" style={{ margin: '10px 0' }}>
                    <div style={{marginBottom:10}}>
                        <Button onClick={this.handleDelete}>删除</Button>
                    </div>
                    <Table
                        bordered
                        columns={columns}
                        rowSelection={rowCheckSelection}
                        onRow={(record, index) => {
                            return {
                                onClick: () => {
                                    this.onRowClick(record, index);
                                }

                                // 点击行
                            };
                        }}
                        dataSource={this.state.dataSource2}
                        pagination={false}
                    />
                </Card>
                <Card title="Mock-复选" style={{ margin: '10px 0' }}>
                    <div style={{marginBottom:10}}>
                        <Button onClick={this.handleDelete}>删除</Button>
                    </div>
                    <Table
                        bordered
                        columns={columns}
                        dataSource={this.state.dataSource2}
                        pagination={this.state.pagination}
                    />
                </Card>
            </div>
        );
    }

} 